<script setup lang="ts">
import { ref, onMounted, computed, nextTick } from 'vue';
import { useRoute } from 'vue-router';
import { useSideMenuStore } from '../stores/counter'
import { login, getInfo, logout } from "@/api";
import { setToken } from '@/utils/auth'
import { ElMessage } from 'element-plus'
import router from '@/router';

const sideStore = useSideMenuStore()

const route = useRoute();
const emit = defineEmits(["getUserInfo"]);
// 计算面包屑路径
const breadcrumbs = computed(() => {
    const matchedRoutes = route.matched; // 获取匹配的路由对象
    //console.log('matchedRoutes', matchedRoutes);
    //breadcrumb: false               // 如果设置为false，则不会在breadcrumb面包屑中显示
    //route.meta.breadcrumb

    // return matchedRoutes.map(route => ({
    //     label: route.meta.title, // || route.name, // 使用 meta 中的 breadcrumb 或者路由名称
    //     to: { path: route.path } // 使用路由路径作为跳转目标
    // }));
    let rs: any[] = []
    matchedRoutes.forEach((item) => {
        if(item.meta && item.meta.title){
            //console.log('rs----', item.path)
            rs.push({ label: item.meta.title, to: { path: item.path },redirect: item.redirect})
        }
    });
    //console.log('rs', rs)
    return rs
});

const userData = ref<any>({})
//注销
function postLogout(){
    logout().then(res => {
        console.log(res)
        setToken('')
        ElMessage({
            message: '注销成功',
            type: 'success',
        })
        router.replace({ path: '/login'})
    })
}

//获取用户详情
function getUserData(){
    getInfo().then(res => {
        // console.log(res.data)
        userData.value = res.data.user
        emit("getUserInfo",res.data.user);
    }).catch(() => {
        emit("getUserInfo");
    })
}

// 时间
// 创建响应式数据
const currentDate = ref<string>('');
const currentDayOfWeek = ref<string>('');

// 获取当前日期并格式化为 YYYY-MM-DD 格式
const getFormattedDate = (): string => {
  const today = new Date();
  const year = today.getFullYear();
  const month = String(today.getMonth() + 1).padStart(2, '0'); // 月份从0开始，所以需要加1
  const day = String(today.getDate()).padStart(2, '0');
  return `${year}-${month}-${day}`;
};

// 获取当前星期的中文名称
const getDayOfWeek = (): string => {
  const daysOfWeek = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
  const today = new Date();
  return daysOfWeek[today.getDay()];
};


onMounted(()=>{
    currentDate.value = getFormattedDate();
    currentDayOfWeek.value = getDayOfWeek();
    
    nextTick(()=>{
        getUserData()
    })
})

</script>
<template>

    <div class="header" :class="sideStore.isCollapse ? 'big' : 'sub'">
        <div class="breadcrumb">
            <img class="ico" src="../assets/img/ico_1.png" alt="">
            <el-breadcrumb separator="/">
                <!-- <el-breadcrumb-item :to="{ path: '/coalRecord' }">首页</el-breadcrumb-item> -->
                <el-breadcrumb-item v-for="(item, index) in breadcrumbs" :key="index" >
                    <span v-if="item.redirect == 'noRedirect'" class="no-redirect">{{ item.label }}</span>
                    <RouterLink v-else :to="item.to">{{ item.label }}</RouterLink>
                </el-breadcrumb-item>
                <!-- <el-breadcrumb-item>盘煤记录</el-breadcrumb-item> -->
            </el-breadcrumb>
        </div>

        <div class="firm">
            <p>武汉云卓环保工程有限公司</p>
        </div>
        <div class="firm">
            <p>{{ currentDate }} {{ currentDayOfWeek }}</p>
        </div>
        <div class="btn">
            <a href="#">
                <img src="../assets/img/ico_2.png" alt="">
            </a>
            <a href="#">
                <img src="../assets/img/ico_3.png" alt="">
            </a>
            <a href="#">
                <el-icon size="20" color="rgba(129, 139, 147, 1)">
                    <BellFilled />
                </el-icon>
            </a>
        </div>
        
        <div class="user">
            <el-dropdown trigger="click">
                <div class="user_info">
                    <img class="ph" src="../assets/img/head.jpg" alt="">
                    <p>{{ userData.nickName }}</p>
                    <el-icon>
                        <CaretBottom />
                    </el-icon>
                </div>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item>个人中心</el-dropdown-item>
                        <el-dropdown-item>系统设置</el-dropdown-item>
                        <el-dropdown-item divided @click="postLogout()">退出</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </div>
    </div>

</template>
<style scoped lang="scss">
.header {
    position: fixed;
    left: 200px;
    top: 0;
    right: 0;
    height: 56px;
    background: #FAFDFF;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 0 15px;
    transition: all 0.2s;
    border-bottom: 1px solid #E0E5ED;
    z-index: 99;

    &.big {
        left: 50px;
    }

    &.sub {
        left: 200px;
    }

    .user {
        flex-shrink: 0;
    }

    .user_info {
        display: flex;
        align-items: center;
        cursor: pointer;

        .ph {
            flex-shrink: 0;
            width: 36px;
            height: 36px;
            border-radius: 50%;
        }

        p {
            font-weight: 500;
            font-size: 18px;
            color: #3D4755;
            line-height: 24px;
            padding: 0 4px 0 8px;
        }
    }

    .btn {
        flex-shrink: 0;
        display: flex;
        align-items: center;
        padding: 0 13px;

        a {
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 36px;
            height: 36px;
            background: #FFFFFF;
            box-shadow: 0px 0px 2px 1px rgba(4, 50, 123, 0.25);
            border-radius: 50%;
            margin: 0 12px;

            img {
                display: block;
                width: 16px;
            }
        }
    }

    .firm {
        flex-shrink: 0;
        display: flex;
        align-items: center;
        position: relative;
        height: 30px;
        padding: 0 25px;

        &::after {
            content: '';
            position: absolute;
            right: 0;
            top: 0;
            width: 1px;
            height: 30px;
            background: #E0E5ED;
            border-radius: 6px 6px 6px 6px;
        }

        p {
            font-weight: 500;
            font-size: 16px;
            color: #3D4755;
            line-height: 30px;
        }
    }

    .breadcrumb {
        width: 100%;
        max-width: 600px;
        height: 36px;
        background: #ECEEF2;
        border-radius: 2px 2px 2px 2px;
        display: flex;
        align-items: center;
        padding: 0 15px;
        margin-right: auto;

        .ico {
            flex-shrink: 0;
            width: 12px;
            margin-right: 10px;
        }
    }
}
</style>